<template>
	<view class="" :class="{ light: theme == 'light' }">
		<view class="ptb20 bgPart plr20">
			<view class="ft18">{{ currencyName || '--' }} {{ $t('assets.mention') }}</view>
			<view class="mt10">{{ $t('trade.use') }} {{ balance }} {{ currencyName || '--' }}</view>
		</view>
		<view class="mt10 plr20" v-if="coinInfo.currency_protocols&&coinInfo.currency_protocols.length > 1">
			<view class="">{{$t('bind.liantype')}}</view>
			<view class="flex mt10">
				<view
					v-for="(item, index) in coinInfo.currency_protocols"
					:key="index"
					class="mr10 ptb5 plr10 bd_input radius4"
					:class="name == item.chain_protocol.code ? 'active' : ''"
					@tap="selectCharge(item)"
				>
					{{ item.chain_protocol.code }}
				</view>
			</view>
		</view>
		<view class="plr20 pb30 bgPart mt10">
			<view class="mb20 pt20">
				<view class="">{{ $t('assets.mentionaddr') }}</view>
				<input type="text" v-model="address" class="bdb1f h40 w100 " :placeholder="$t('assets.p_addr')" />
			</view>
			<view class="mb20">
				<view class="">{{ $t('trade.num') }}</view>
				<view class="flex alcenter between bdb1f">
					<input type="number" class=" h40 flex1" v-model="number" @input="numberChange" :placeholder="$t('assets.minnum') + (coinInfo.draw_min || '0.00')" />
					<view class="flex alcenter">
						<text class="blue ft14 pr10 bdr_white50">{{ currencyName || '--' }}</text>
						<view class="pl10" @tap="all">{{ $t('trade.all') }}</view>
					</view>
				</view>
			</view>
			<!-- <view class="mb20">
				<view class="">memo</view>
				<input type="text" class="bdb1f h40 w100" v-model="memoText" :placeholder="$t('assets.p_memo')" />
			</view> -->
			<view class="mb20">
				<view class="">{{ $t('login.s_dealpwd') }}</view>
				<input type="text" password="" class="bdb1f h40 w100" v-model="password" :placeholder="$t('login.e_pdeal')" />
			</view>
			<view class="mb20 ptb10 flex alcenter between">
				<view class="">{{ $t('assets.recivenum') }}</view>
				<view class="">{{ reciveNumber }} {{ currencyName || '--' }}</view>
			</view>
			<view class="mb20">{{ $t('trade.fee') }}：{{ coinInfo.minerFee*100 || '--' }}% {{ currencyName || '--' }}</view>
			<view class="mt40 bgBlue radius4 ptb10 white ft14 tc mb10" @tap="mention">{{ $t('assets.mention') }}</view>
		</view>
		
		<view class="plr10 ptb15 mt10 bgPart">
			<view class="ft16">{{ $t('assets.merecord') }}</view>
			<view class="mt10 pb100">
				<!-- <view class="flex alcenter ptb10 bdb_blue3 ">
					<view class="flex1">{{ $t('trade.num') }}</view>
					<view class="flex1 ">{{ $t('assets.record') }}</view>
					<view class="flex1 tr">{{ $t('trade.time') }}</view>
				</view> -->
				<view class="mt10 bdb_blue3 ptb5" v-for="(item, i) in logList" :key="i" v-if="logList.length > 0">
				    <view class="flex">
				    	<view class="flex1">
							<text class="gray4">{{ $t('trade.num') }}</text>
							<view class="mt5 ft14">{{item.number}}</view>
						</view>
						<view class="flex1 tc">
							<text class="gray4">{{ $t('trade.fee') }}</text>
							<view class="mt5 ft14">{{item.fee}}</view>
						</view>
						<view class="flex1 tr">
							<text class="gray4">{{ $t('assets.recivenum') }}</text>
							<view class="mt5 ft14">{{item.real_number}}</view>
						</view>
				    </view>
					<view class="flex mt10">
						<view class="flex1">
							<text class="gray4">{{ $t('assets.mentionaddr') }}</text>
							<view class="mt5 ft14">{{item.address}}</view>
						</view>
						<view class="flex1 tc">
							<text class="gray4">{{ $t('assets.status') }}</text>
							<view class="mt5 ft14">{{item.status_name}}</view>
						</view>
						<view class="flex1 tr">
							<text class="gray4">{{ $t('trade.time') }}</text>
							<view class="mt5 ft14">{{item.created_at}}</view>
						</view>
					</view>
				</view>
				<view class="mt20 tc" v-if="logList.length == 0">
					<image src="../../static/image/anonymous.png" class="wt60 h60"></image>
					<view>{{ $t('home.norecord') }}</view>
				</view>
				<view class="tc gray7 ptb20" v-show="!hasMore && logList.length > 0">{{ $t('home.nomore') }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			password: '',
			currency: '',
			coinInfo: {},
			address: '',
			name: '',
			number: '',
			reciveNumber: '0.0',
			chargeType: [],
			contractAddress: '',
			userId: '',
			currencyName: '',
			currencyType: '',
			balance: '',
			labelText: '',
			walletData: [],
			showMemo:false,
			memoText:"",
			currencyProtocolId:'',
			account_type_id:'',
			
			page: 1,
			hasMore: true,
			logList: [],
		};
	},
	onLoad(e) {
		uni.setNavigationBarTitle({
			title: this.$t('assets').mention
		});
		this.currencyName = e.currency;
		this.getCoinInfo(e.currency);
	},
	computed: {
		...mapState(['theme'])
	},
	onPullDownRefresh() {
		this.page = 1;
		this.getLog();
		this.getCoinInfo();
	},
	onReachBottom() {
		if (!this.hasMore){
			return;
		} 
		this.page++;
		this.getLog();
	},
	onShow() {
		this.$utils.setThemeTop(this.theme);
	},
	methods: {
		getCoinInfo(symbol) {
			let that = this ;
			that.$utils.initDataToken({ url: 'uc/asset/wallet/'+symbol, data: { } }, res => {
				uni.stopPullDownRefresh();
				that.coinInfo = res.coin;
				this.balance = res.balance;
			});
			
			// this.$utils.initDataToken({ url: 'account/get_info', type: 'POST', data: { currency_id: this.currency } }, res => {
			// 	uni.stopPullDownRefresh();
			// 	this.currencyName = res.name;
			// 	this.balance = res.change_balance;
			// 	this.walletData = res.wallet_data;
			// 	if(res.make_wallet == 2){
			// 		this.showMemo = true;
			// 	}else{
			// 		this.showMemo = false;
			// 	}
			// 	if (res.multi_protocol == 1) {
			// 		this.chargeType = res.type_data;
			// 		this.contractAddress = res.type_data[0].contract_address;
			// 		this.name = res.type_data[0].name;
			// 		this.coinInfo = res.type_data[0];
			// 		this.currencyType = res.type_data[0].type;
			// 		var ids = res.type_data[0].id;
					
			// 	} else {
			// 		this.contractAddress = res.contract_address;
			// 		this.name = res.name;
			// 		this.coinInfo = res;
			// 		// if (res.wallet_data && res.wallet_data.length > 0) {
			// 		// 	this.labelText = res.wallet_data[0].label;
			// 		// }
			// 	}
			// 	this.getUserInfo();
			// });
		},
		// getUserInfo() {
		// 	this.$utils.initDataToken({ url: 'user/info' }, res => {
		// 		this.getAddress(res.id);
		// 		this.userId = res.id;
		// 	});
		// },
		getAddress(id) {
			let contract_address='';
			// if(this.coinInfo.currency_protocols.length>0){
			// 	contract_address = this.coinInfo.currency_protocols[0].token_address;
			// }
			this.$utils.getAddressOnline(
				{ url: 'GetDrawAddress', data: { user_id: id, coin_name: this.name, contract_address:this.contractAddress} },
				res => {
					uni.stopPullDownRefresh();
					console.log(res);
					if (res.code == 0) {
						this.address = res.data.address;
					} else {
						this.$utils.showLayer(res.errorinfo);
					}
				}
			);
		},
		all() {
			this.number = this.balance;
			// this.reciveNumber = this.balance* (1 - this.coinInfo.rate / 100);
			this.reciveNumber = this.balance - (this.balance*(this.coinInfo.minerFee));
		},
		numberChange(e) {
			// 到账数量
			// this.reciveNumber = e.target.value * (1 - this.coinInfo.draw_rate / 100);
			this.reciveNumber = e.target.value - (e.target.value*(this.coinInfo.minerFee));
		},
		// 选择充币类型
		selectCharge(options) {
			var that = this;
			that.contractAddress = options.token_address;
			that.name = options.chain_protocol.code;
			// that.coinInfo = options;
			this.currencyProtocolId = options.id;
			// that.currencyType = options.type;
			that.address = "";
			that.memoText = "";
			// var ids = options.id;
			// if (that.walletData.length > 0) {
			// 	that.walletData.forEach(item => {
			// 		if (ids == item.currency) {
			// 			that.labelText = item.label;
			// 		}
			// 	});
			// }
			that.getAddress(that.userId);
		},
		// 复制标签地址
		copyLabel() {
			var that = this;
			// #ifdef APP-PLUS
			uni.setClipboardData({
				data: that.labelText,
				success: function() {
					that.$utils.showLayer(that.$t('assets.copy_success'));
				},
				fail: function() {
					that.$utils.showLayer(that.$t('assets.copy_err'));
				}
			});
			// #endif
		},
		mention() {
			if (!this.address) {
				return this.$utils.showLayer(this.$t('assets.p_addr'));
			}
			if (!this.number) {
				return this.$utils.showLayer(this.$t('assets.p_minnum'));
			}
			if (!this.password) {
				return this.$utils.showLayer(this.$t('login.e_pdeal'));
			}
			if (this.password.length < 6) {
				return this.$utils.showLayer(this.$t('login.e_pdealerr'));
			}
			
			// String unit, String address,
			//                                   BigDecimal amount, BigDecimal fee,String remark,String jyPassword
			let data = {
				unit: this.currencyName, 
				amount: this.number, 
				address: this.address, 
				jyPassword: this.password,
				fee:1,
				remark:'1',
				code:'1',
				googleCode:'1'
			};
			this.$utils.initDataToken(
				{
					url: 'uc/withdraw/apply?unit='+this.currencyName+'&amount='+this.number+'&address='+this.address+'&jyPassword='+this.password+'&fee=0',
					type: 'POST',
					// data: { unit: this.currencyName, amount: this.number, address: this.address, jyPassword: this.password,fee:1,remark:'1',code:'1',googleCode:'1'}
				},
				(res, msg) => {
					console.log(res);
					this.$utils.showLayer(msg);
					this.page = 1;
					this.getLog();
					setTimeout(() => {
						// this.getCoinInfo();
						uni.navigateBack({
							delta: 1
						});
					}, 1500);
				}
			);
		},
		getLog() {
			let that = this;
			this.$utils.initDataToken({ url: 'account/draw_list', data: { currency_id: this.currency, page: this.page, limit: 15 } }, res => {
				uni.stopPullDownRefresh();
				let data = res.data;
				that.logList = that.page == 1 ? data : that.logList.concat(data);
				that.hasMore = res.last_page <= res.current_page ? false : true;
				console.log(that.hasMore)
			});
		}
	}
};
</script>

<style>
.active {
	color: #007aff;
	border-color: #007aff;
}
</style>
